<template>
  <div>
    <div class="list">
      <div v-for="video in VideoList" class="item">
        <div class="item-body">
          <div class="lgi-heading">
            <label style="margin-right: 10px">{{video.title}}</label>
            <el-button type="text" size="mini" @click="handldPlay(video.vid)">点击播放</el-button>
          </div>
          <small class="lgi-text">网易视频云Id：{{video.net_vid}}</small>
          <small v-if="video.address" class="lgi-text">视频地址：{{video.address}}</small>
          <ul class="lgi-attrs">
            <li>创建时间：{{video.create_time}}</li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog title="视频播放" v-model="showPlayerDialog" :close-on-click-modal='false' @close="stopPlayVideo">
      <video ref="player" style="width: 100%;height: 100%" controls="controls" autoplay="autoplay">
        浏览器不支持播放
        <source type="video/mp4" v-bind:src="palyVideoUrl"/>
      </video>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../../api'

  var filterFrom = {
    pnum: 1,
    records: 10
  }

  export default {
    props: ['curLessonId'],

    data: function () {
      return {
        showPlayerDialog: false,
        palyVideoUrl: '',
        VideoList: [],
        filterFrom
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handldPlay: function (netVid) {
        API.videoNetDetail({net_vid: netVid}, (data) => {
          if (!data) return
          this.palyVideoUrl = data.origUrl
          this.startPlayVideo()
        })
        this.showPlayerDialog = true
      },
      stopPlayVideo: function () {
        this.$refs.player.pause()
        this.palyVideoUrl = ''
      },
      startPlayVideo: function () {
        if (this.$refs.player) {
          this.$refs.player.load()
          this.$refs.player.play()
        }
      },
      fetchData: function () {
        this.isLoading = true
        this.filterFrom.lesson_id = this.curLessonId
        API.course_lesson_video_list(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.VideoList = data.list
          }
        )
      },
      deleteComment: function (comment) {
        var deletePar = {
          'id': comment.id,
          'type': 3
        }
        API.delete_comment(deletePar,
          (data) => {
            if (!data) return
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          }
        )
      }
    }
  }
</script>

<style scoped>
  .lgi-heading {
    color: #000;
    font-weight: 500;
    margin: 3px 0px
  }

  .lgi-heading,
  .lgi-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lgi-attrs>li,
  .lgi-text {
    font-size: 12px;
    color: #777
  }

  .lgi-attrs {
    list-style: none;
    padding: 0;
    margin: 8px 0px
  }

  .lgi-attrs>li {
    display: inline-block;
    border: 1px solid #f0f0f0;
    margin: 2px 2px 2px 0;
    padding: 2px 5px
  }
</style>
